import { Resizable } from 'react-resizable';
import React, { useEffect, useState } from 'react';
import { Table, Input, Button } from 'antd';
import { request } from 'umi';
import {
  ProFormText,
  ProFormDateRangePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import './work4.less';
export default () => {
  const [applys, setApplys] = useState([]); //  总数据渲染
  const [acolumns, setAcolumns] = useState([
    {
      title: '序号',
      key: '_id',
      width: 40,
      render: (text, record, index) => <>{index + 1}</>,
      ellipsis: true,
    },
    {
      title: '流程编号',
      key: 'anumber',
      width: 240,
      dataIndex: 'anumber',
      ellipsis: true,
    },
    {
      title: '流程名称',
      dataIndex: 'technological',
      key: 'technological',
      ellipsis: true,
      width: 480,
    },
    {
      title: '发起部门',
      dataIndex: 'department',
      key: 'department',
      ellipsis: true,
      width: 100,
    },
    {
      title: '发起人',
      dataIndex: 'aname',
      key: 'aname',
      ellipsis: true,
      width: 100,
    },
    {
      title: '发起日期',
      dataIndex: 'date',
      key: 'date',
      ellipsis: true,
      width: 100,
    },
    {
      title: '当前节点',
      dataIndex: 'prodepartment',
      key: 'prodepartment',
      ellipsis: true,
      width: 100,
    },
    {
      title: '待办人员',
      dataIndex: 'daname',
      key: 'daname',
      ellipsis: true,
      width: 100,
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      ellipsis: true,
      width: 100,
    },
    {
      key: 'proccess',
      ellipsis: true,
      width: 100,
      render: (text) => <a>过程</a>,
    },
    {
      key: 'proccessed',
      ellipsis: true,
      width: 100,
      render: (text) => <a>催办</a>,
    },
  ]);
  const [components, setComponents] = useState({});
  useEffect(() => {
    request('/api/ljf/apply').then((res) => {
      setApplys(res.applyes);
    });
    setComponents({
      header: {
        cell: ResizeableTitle,
      },
    });
  }, []);

  const ResizeableTitle = (props: any) => {
    const { onResize, width = 100, ...restProps } = props;
    if (!width) {
      return <th {...restProps} />;
    }

    return (
      <Resizable width={width} height={38} onResize={onResize}>
        <th {...restProps} />
      </Resizable>
    );
  };
  const handleResize =
    (index: any) =>
    (e: any, { size }: any) => {
      const nextColumns = [...columns];
      nextColumns[index] = {
        ...nextColumns[index],
        width: size.width,
      };
      setAcolumns(nextColumns);
    };
  const columns = acolumns.map((col, index) => ({
    ...col,
    onHeaderCell: () => ({
      width: col.width || 100,
      onResize: handleResize(index),
    }),
  }));
  const [selectedRowKeys, setSelectedRowKeys] = useState([]);
  const onSelectChange = (newSelectedRowKeys: any) => {
    console.log('selectedRowKeys changed: ', newSelectedRowKeys);
    setSelectedRowKeys(newSelectedRowKeys);
  };
  const rowSelection = {
    selectedRowKeys,
    onChange: onSelectChange,
  };
  return (
    <div className="applys">
      <div className="applysearch">
        <ProFormText width="md" name="name" label="流程名称" />
        <ProFormDateRangePicker name="dateRange" label="发起日期" />
        <ProFormText width="md" name="name" label="发起人" />
        <ProFormText width="md" name="name" label="待办人" />
        <ProFormSelect
          name="select"
          label="状态"
          valueEnum={{
            china: '全部(不含作废)',
            usa: '审批中',
            usa0: '审批完成',
            usa1: '退回',
            usa2: '委托',
            usa3: '作废',
          }}
        />
        <button className="searcha">查询</button>
      </div>
      <div className="applyTable">
        <Table
          components={components}
          columns={columns}
          pagination={false}
          bordered
          rowKey="_id"
          scroll={{
            x: 1278,
            y: 460,
          }}
          rowSelection={rowSelection}
          onRow={(record, index) => {
            return {
              onClick: (e) => {
                let tr = e.target.parentNode;
                for (let i = 0; i < tr.parentNode.childNodes.length; i++) {
                  tr.parentNode.childNodes[i].style.color = 'black';
                }
                tr.style.color = '#e17009';
              },
            };
          }}
          dataSource={applys}
        />
      </div>
      <div className="alpplybottom">
        <span className="iconfont icon-xiangzuoshuangjiantou"></span>
        <span className="iconfont icon-xiangzuojiantou"></span>
        <span className="iconfont icon-vertical_line"></span>
        第
        <Input value={1} />
        页，共1页
        <span className="iconfont icon-vertical_line"></span>
        <span className="iconfont icon-xiangyoujiantou"></span>
        <span className="iconfont icon-xiangyoushuangjiantou"></span>
        <span className="iconfont icon-vertical_line"></span>
        每页记录数：
        <Input value={50} />
        <Button>确定</Button>
      </div>
    </div>
  );
};
